<!--  -->
<template>
  <div class="tab_component">
    <ul class="tab_component_ul">
      <li
        class="tab_component_li"
        v-for="item in tabs" :key="item.tabIndex"
        @click="tab(item)"
        @mouseover="mouseover(item.tabIndex)"
        @mouseout="mouseout(item.tabIndex)">

        <span :class="{activeTitle:item.tabIndex == num}">{{item.tabTitle}}</span>

        <div class="bgImg">
          <img v-show="item.tabIndex !== num && item.tabIndex !== imgShow" :src="require('_as/changyou.png')" alt="">
          <img v-show="item.tabIndex == num || item.tabIndex == imgShow" :src="require('_as/changyou_bg.png')" alt="">
        </div>

      </li>
    </ul>
     <div class="tabCon">
       <slot></slot>
     </div>

  </div>
</template>

<script>
export default {
  data () {
    return {
      num: 0,
      imgShow: 0,
      currentTabTitle: '吃',
      tabs: [
        {
          tabIndex: 0,
          tabTitle: '吃'
        },
        {
          tabIndex: 1,
          tabTitle: '住'
        },
        {
          tabIndex: 2,
          tabTitle: '行'
        },
        {
          tabIndex: 3,
          tabTitle: '游'
        },
        {
          tabIndex: 4,
          tabTitle: '购'
        },
        {
          tabIndex: 5,
          tabTitle: '娱'
        }
      ]
    }
  },
  components: {},
  computed: {},
  created () {},
  mounted () {},
  methods: {
    tab (item) {
      this.num = item.tabIndex
      this.$emit('sightseeingTabClick', item)
    },
    mouseover (tabIndex) {
      this.imgShow = tabIndex
    },
    mouseout () {
      this.imgShow = this.num
    }
  }
}

</script>

<style lang='stylus' rel='stylesheet/stylus' scoped>
.tab_component_ul {
  display flex
  justify-content center
  align-items center
  background url(../../assets/img/changyou2.png) no-repeat
  background-size  100% 94px
  width 80%
  margin 20px auto 0
  .tab_component_li {
    position relative
    width 48px
    height 48px
    line-height 48px
    margin 120px 24px 30px
    cursor default
    text-align center
    // &:nth-child(3) {
    //   margin-right 100px
    // }
    // &:nth-child(4) {
    //   margin-left 100px
    // }
    span {
      position absolute
      top 0
      left 0
      width 48px
      z-index 501
    }
    .bgImg {
      position absolute
      top 0
      left 0
      img {
        width 48px
        height 48px
      }
    }
  }
}

.activeTitle {
  color #000
}
.tabCon {
}

</style>
